<template>
  <div>
    <van-nav-bar title="商品" left-text left-arrow @click-left="onClickLeft" />
    <van-search v-model="value" placeholder="搜索你想要的东东" show-action shape="round" @search="onSearch">
      <div slot="action" @click="onSearch"></div>
    </van-search>
    <van-tabs v-model="active">
      <van-tab title="手提包 ">
        <div style="float:left;width:">
          <van-card
            thumb="https://img.yzcdn.cn/vant/t-thirt.jpg"
            bottom
            price="1688.00"
            desc="衬衫"
            title="耐克"
          ></van-card>
        </div>
        <div style="float:left;width:">
          <van-card
            price="1288.00"
            desc="衬衫"
            title="阿迪"
            thumb="https://img.yzcdn.cn/vant/t-thirt.jpg"
          ></van-card>
        </div>

         <div style="float:left;width:">
          <van-card
            price="1288.00"
            desc="衬衫"
            title="阿迪"
            thumb="https://img.yzcdn.cn/vant/t-thirt.jpg"
          ></van-card>
        </div>
         <div style="float:left;width:">
          <van-card
            price="1288.00"
            desc="衬衫"
            title="阿迪"
            thumb="https://img.yzcdn.cn/vant/t-thirt.jpg"
          ></van-card>
        </div>
         <div style="float:left;width:">
          <van-card
            price="1288.00"
            desc="衬衫"
            title="阿迪"
            thumb="https://img.yzcdn.cn/vant/t-thirt.jpg"
          ></van-card>
        </div>
         <div style="float:left;width:">
          <van-card
            price="1288.00"
            desc="衬衫"
            title="阿迪"
            thumb="https://img.yzcdn.cn/vant/t-thirt.jpg"
          ></van-card>
        </div>
      </van-tab>
<!--  -->

      <van-tab  @click="lists" title="品牌 ">
        <!-- <van-list
  v-model="loading"
  :finished="finished"
  finished-text="没有更多了"
  @load="onLoad"
>
  <van-cell
    v-for="item in list"
    :key="item"
    :title="item"
  />
</van-list> -->
<ul>
  <li v-for="item in list">
    <span @click="tiaozhuan(item.goodsId)" style="line-height: 24px;color:#aaa">{{item.brand}}</span>
   
  </li>
</ul>
      </van-tab>


      <!--  -->
      <van-tab title="排序 ">
        <van-dropdown-menu style="z-index:1000" >
  <van-dropdown-item v-model="value2" :options="option2" />
</van-dropdown-menu>
        <div style="float:left;width:">
          
          <van-card
            thumb="https://img.yzcdn.cn/vant/t-thirt.jpg"
            bottom
            price="1688.00"
            desc="衬衫"
            title="耐克"
          ></van-card>
        </div>
        <div style="float:left;width:">
          <van-card
            price="1288.00"
            desc="衬衫"
            title="阿迪"
            thumb="https://img.yzcdn.cn/vant/t-thirt.jpg"
          ></van-card>
        </div>

         <div style="float:left;width:">
          <van-card
            price="1288.00"
            desc="衬衫"
            title="阿迪"
            thumb="https://img.yzcdn.cn/vant/t-thirt.jpg"
          ></van-card>
        </div>
         <div style="float:left;width:">
          <van-card
            price="1288.00"
            desc="衬衫"
            title="阿迪"
            thumb="https://img.yzcdn.cn/vant/t-thirt.jpg"
          ></van-card>
        </div>
         <div style="float:left;width:">
          <van-card
            price="1288.00"
            desc="衬衫"
            title="阿迪"
            thumb="https://img.yzcdn.cn/vant/t-thirt.jpg"
          ></van-card>
        </div>
         <div style="float:left;width:">
          <van-card
            price="1288.00"
            desc="衬衫"
            title="阿迪"
            thumb="https://img.yzcdn.cn/vant/t-thirt.jpg"
          ></van-card>
        </div>
      </van-tab>
      <van-tab title="筛选 ">
          <div style="float:left;width:">
          <van-card
            thumb="https://img.yzcdn.cn/vant/t-thirt.jpg"
            bottom
            price="1688.00"
            desc="衬衫"
            title="耐克"
          ></van-card>
        </div>
        <div style="float:left;width:">
          <van-card
            price="1288.00"
            desc="衬衫"
            title="阿迪"
            thumb="https://img.yzcdn.cn/vant/t-thirt.jpg"
          ></van-card>
        </div>

         <div style="float:left;width:">
          <van-card
            price="1288.00"
            desc="衬衫"
            title="阿迪"
            thumb="https://img.yzcdn.cn/vant/t-thirt.jpg"
          ></van-card>
        </div>
         <div style="float:left;width:">
          <van-card
            price="1288.00"
            desc="衬衫"
            title="阿迪"
            thumb="https://img.yzcdn.cn/vant/t-thirt.jpg"
          ></van-card>
        </div>
         <div style="float:left;width:">
          <van-card
            price="1288.00"
            desc="衬衫"
            title="阿迪"
            thumb="https://img.yzcdn.cn/vant/t-thirt.jpg"
          ></van-card>
        </div>
         <div style="float:left;width:">
          <van-card
            price="1288.00"
            desc="衬衫"
            title="阿迪"
            thumb="https://img.yzcdn.cn/vant/t-thirt.jpg"
          ></van-card>
        </div>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
import axios from "axios"
export default {
  name: "dity",
  data() {
    return {
      value: "",
      active: 0,
      list:[],
      loading:false,
      finished:false,
      value2:'a',
      option2:[
    {text:'发布时间',value:'a'},
    {text:'价格升序',value:'b'},
    {text:'价格降序',value:'c'},
      ]
    };
  },
  methods: {
    tiaozhuan(id){
      this.$router.push("/details/"+id);
    },
    onClickLeft() {
      this.$router.go(-1);
    },
    onSearch() {},
     onLoad() {
      // 异步更新数据
      setTimeout(() => {
        for (let i = 0; i < 10; i++) {
          this.list.push(this.list.length + 1);
        }
        // 加载状态结束
        this.loading = false;

        // 数据全部加载完成
        if (this.list.length >= 40) {
          this.finished = true;
        }
      }, 500);
    },
    lists(){
      console.log(1)
     
    }
  
  },
  mounted(){
axios({
  // method: 'post',
   url: "http://47.102.221.184:8083/secluxury/type/brandGoodsList ",
  }).then((data) => {
   var a = data.data;
        a.map(goods => {
          // console.log(goods.goodsList);
          goods.goodsList.map(yahu => {
            this.list.push(yahu);
            // console.log(yahu);
            // console.log(this.list);
          });
        });
  }).catch((err) => {
   console.log(err)
   })
  },

};
</script>
<style scoped>

</style>
